<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 表单
                </el-breadcrumb-item>
                <el-breadcrumb-item>基本表单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="网站名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                   <el-form-item label="关键字">
                        <el-input v-model="form.keyWord"></el-input>
                    </el-form-item>
                    <el-form-item label="内容">
                        <el-input type="textarea" rows="5" v-model="form.desc"></el-input>
                    </el-form-item>

                    <p>

                     <el-form-item label="logo">
                        <div class="crop-demo">
                        <img :src="form.logo" class="pre-img">
                        <div class="crop-demo-btn">选择图片
                            <input class="crop-input" type="file" name="image" accept="image/*" @change="setImage"/>
                        </div>
                      </div>
                    </el-form-item>

                      <el-form-item label="二维码">
                        <div class="crop-demo">
                        <img :src="form.rqCode" class="pre-img">
                        <div class="crop-demo-btn">选择图片
                            <input class="crop-input" type="file" name="image" accept="image/*" @change="setrqCode"/>
                        </div>
                      </div>
                    </el-form-item>
                        
                    </p>
                
                    <el-form-item label="微信">
                        <el-input v-model="form.wechat"></el-input>
                    </el-form-item>
                   <el-form-item label="qq">
                        <el-input v-model="form.qq"></el-input>
                    </el-form-item>
                     <el-form-item label="电话">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">表单提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    data() {
        return {
            form: {
                title:'',
                keyWord:'',
                message:'',
                logo:require('../../assets/img/img.jpg'), //默认预览图片,
                rqCode:require('../../assets/img/img.jpg'), //默认预览图片,
                wechat:'',
                qq:'',
                phone:'',

            }

        };
    },
    methods: {
        onSubmit() {
            this.$message.success('提交成功！');
        },
        setImage(e){   //设置图片
                const file = e.target.files[0];
                if (!file.type.includes('image/')) {
                    return;
                }
                const reader = new FileReader();
                reader.onload = (event) => {
                    this.form.logo = event.target.result;
                };
                reader.readAsDataURL(file);

            },
            setrqCode(e){   //设置图片
                const file = e.target.files[0];
                if (!file.type.includes('image/')) {
                    return;
                }
                const reader = new FileReader();
                reader.onload = (event) => {
                    this.form.rqCode = event.target.result;
                };
                reader.readAsDataURL(file);

            },
            
    }
};
</script>



<style scoped>

    .pre-img{   
        width: 100px;
        height: 100px;
        background: #f8f8f8;
        border: 1px solid #eee;
        border-radius: 5px;
    }
    .crop-demo{
        display: flex;
        align-items: flex-end;
    }
    .crop-demo-btn{
        position: relative;
        width: 100px;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        margin-left: 30px;
        background-color: #409eff;
        color: #fff;
        font-size: 14px;
        border-radius: 4px;
        box-sizing: border-box;
    }
    .crop-input{
        position: absolute;
        width: 100px;
        height: 40px;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }
</style>